<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

        <p>{{msg}}</p>
        <button @click='init'>获取信息</button>
        <button @click="gg">销毁</button>

        <table border="1" cellspacing="0" cellpadding="10">
            <tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>电话</th>
				<th>地址</th>
            </tr>
            <tr v-for="(item,index) in list">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.address}}</td>
            </tr>
        </table>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                list: []
            },
            methods: {
                init() {
                    var xhr = new XMLHttpRequest();
                    xhr.onload = () => {
                        this.list = JSON.parse(xhr.responseText).data.list;
                    }
                    xhr.open('GET','http://bufantec.com/api/test/user/list');
                    xhr.send(null)
                },
                gg() {
                    this.$destroy();
                }
            },
            beforeCreate() {
                console.log('beforeCreate', this.msg);
            },
            created() {
                console.log('created', this.msg);
                this.init()
            },
            beforeMount() {
                var i = document.querySelector('p');
                console.log('beforeMount', i);
            },
            mounted() {
                var i = document.querySelector('p');
                console.log('Mounted', i);
            },
            beforeUpdate() {
                console.log('beforeUpdated');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            },
        })
    </script>
</body>
</html>